<template>
  <div class="mine-box admin-order-box order-box response-box">
    <div class="user-box-title" :style="back">
      <adminuserinfo></adminuserinfo>
      <div class="m-moneybox">
        <div class="fleft choose-input-box">
          <span size="30" class="iconfont icon-sousuo"></span>
          <input maxlength="8" type="text" class="choose-input" placeholder="请输入手机号" v-model="mobile" />
        </div>
        <div class="fright sx-text" @click="showchoosediv">筛选</div>
      </div>
    </div>

    <div class="use-box List">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
        <mu-list>
          <mu-list-item v-for="(item,index) in orderList" :key="index">
            <mu-list-item-content @click="single(item.id,item.state)">
              <mu-list-item-title>
                <div class="order-title">
                  <span class="fleft">{{item.userName}}</span>
                  <span class="fright status" style="color:#1FC3F2;">{{item.state}}</span>

                  <div class="_clear"></div>
                </div>
                <div class="order-sec-title">
                  <span class="fleft createtime">{{item.createTime}}</span>

                  <div class="_clear"></div>
                </div>
              </mu-list-item-title>
              <mu-list-item-sub-title>
                <div class="fleft order-timebox order-title">
                  <div class="type-title">问题类型:{{item.type}}</div>
                  <div class="time-des">设备编号:{{item.deviceNo}}</div>
                  <div class="time-des">手机号:{{item.mobile}}</div>
                </div>

                <div class="_clear"></div>
              </mu-list-item-sub-title>
            </mu-list-item-content>
          </mu-list-item>
        </mu-list>
      </mu-load-more>
      <div v-show="nolist" class="nolist">
        <span class="iconfont icon-charging"></span>
        <p>暂无反馈记录</p>
      </div>
    </div>

    <responsechoose ref="responsechoose" v-on:chooseDate="shaixu"></responsechoose>
  </div>
</template>

<script>
import responsechoose from "./responsechoose";
import { Toast } from "vant";
import "vant/lib/toast/style/index";
export default {
  data() {
    return {
      deviceNo: "",
        mobile: "",
      startTime:'',
      endTime:'',
      type:'',
      state:'',
      num: 5,
      loaded_all: false,
      refreshing: false,
      loading: false,
      text: "List",
      nolist: true,
      back: {
        background:
          "url(" + require("../../../assets/image/minebackimg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      },
      orderList: []
    };
  },
  mounted() {
    this.getList();
  },
  components: {
    responsechoose: responsechoose
  },
  methods: {
    getList() {
      this.$api.getFeedBackList({
        pageNo: 1,
        pageSize: this.num,
        type: this.type,
        mobile:this.mobile,
        startTime:this.startTime,
        endTime:this.endTime,
        state:this.state,
      }).then(res => {
        console.log(res);
        if (res.data.data != null) {
          this.nolist = false;
          this.orderList = res.data.data.records;
          if (res.data.data.pages == 1) {
            Toast("已加载全部数据");
            this.loaded_all = true;
          }
        }
      });
    },
    showchoosediv() {
      this.$refs.responsechoose.Showchoosediv();
    },
    shaixu(somedata) {
        this.type=somedata.type,
        this.startTime =somedata.stime,
        this.endTime =somedata.etime,
        this.state =somedata.state,
      this.getList()
    },
    single(id, state) {

      this.$router.push({
        path: "/admin/response-single/" + id
      });
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.num=5;
        this.getList();
      }, 2000);
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 3;
        if (this.deviceNo != "") {
          this.getList();
        } else {
          this.getList();
        }
      }, 2000);
    }
  },
  watch: {
    mobile: function(v) {
        this.getList();

    },
    orderList: function(v) {
      if (v == "") {
        this.nolist = true;
      } else {
        this.nolist = false;
      }
    }
  }
};
</script>
